import React, {Component} from 'react'
import {connect} from 'react-redux'
import { List , Button ,Toast} from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
import {parseQuery} from "../../utils/tools"

class OrderItemGG extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedPeiyu: this.getItemsAsArray(props.items),
      money:this.props.baseinfo.money,
      total:0,
      totalmoney:0
    };
  }
  getNumberLabel() {
    const {platform} = this.props;
    const {selectedPeiyu} = this.state;
    
    let labels = [];

    for (let item of selectedPeiyu) {
      let parts = item.id.split('-');
      let labelOne = platform['betInfo']['oddinfo'][0][parts[0]];
      labels =<span key={item.id} className="seperator">{labelOne}</span>;
    }

    return <span>{labels}</span>
  }

  getNumberContent() {
    const {platform} = this.props;
    const {selectedPeiyu} = this.state;
    let labels = [];
    for (let item of selectedPeiyu) {
      let parts = item.id.split('-');
      console.log(['parts', parts, platform['betInfo']['oddinfo'], item.id]);
      let labelTwo = platform['betInfo']['oddinfo'][1][parts[1]];
      let labelThree = platform['betInfo']['odds'][item.id];
      let labelNumber = platform['betInfo']['oddinfo'][2][parts[2]];
      labels.push(<span key={item.id} className="seperator">
        <span>{labelTwo}: </span> 
        <span className="red">{labelNumber}</span>
      </span>);
    }

    return <div className="bet-content">{labels}</div>
  }

  getMinLimit() {
    const {platform, location} = this.props;
    let query = parseQuery(location.search);
    if (platform['betInfo']) {
      return platform['betInfo']['minLimit'][query.pankou.toUpperCase()];
    }
  }

  getMaxLimit() {
    const {platform, location} = this.props;
    let query = parseQuery(location.search);
    if (platform['betInfo']) {
      return platform['betInfo']['maxLimit'][query.pankou.toUpperCase()];
    }
  }

  getPeriodLimit() {
    const {platform, location} = this.props;
    let query = parseQuery(location.search);
    if (platform['betInfo']) {
      return platform['betInfo']['maxPeriodLimit'][query.pankou.toUpperCase()];
    }
  }

  getItemsAsArray(selectedPeiyu) {
    let itemsArray = [];
    for (var key in selectedPeiyu) {
      itemsArray.push(selectedPeiyu[key]);
    }
    return itemsArray;
  }

  onSubmit() {
    const {location,user} = this.props;
    if(!this.state.totalmoney){
      return Toast.fail("请输入下注金额",1)
    }
    if(this.state.totalmoney > user.get('info').userMoney){
      return  Toast.fail('下注金额超出您的余额',2);
    }
   
    let items = [];
    let selectedPeiyu = this.state.selectedPeiyu;
    let query = parseQuery(location.search);
    for (let peiyu of selectedPeiyu) {
      items.push({
        uid: peiyu.id,
        rate: peiyu.pl,
        xzje: peiyu.money,
        label: query.gameCode,
        label2: query.pankou,
        number: peiyu.number,
      });
      if (!peiyu.money || peiyu.money > this.getMaxLimit() || peiyu.money < this.getMinLimit() ) {
        Toast.fail('下注金额不符合要求');
        return ;
      }
    }
    this.props.onSubmit(items, 'cl');
  }

  onMoneyInput() {
    if(this.refs.money.value%1 !==0){
      this.refs.money.value = ~~this.refs.money.value
      return Toast.fail("下注金额必须为整数",1)
    }
    let selectedPeiyu = this.state.selectedPeiyu;
    for (let i = 0; i < selectedPeiyu.length; i++) {
      let peiyu = selectedPeiyu[i];
      peiyu.money = this.refs.money.value; 
    }
    this.setState({
      selectedPeiyu,
      totalmoney:selectedPeiyu.length*this.refs.money.value,
    });
  }

  componentDidMount(){
    let {money,total,selectedPeiyu} = this.state
    if(money){
      for(var k in selectedPeiyu){
        selectedPeiyu[k].money = money
      }
      this.refs.money.value = money
    }
    this.setState({
      total:selectedPeiyu.length,
      totalmoney:selectedPeiyu.length*money,
    })
  }
  render() {
    let items = this.state.selectedPeiyu;
    var {name,money} = this.props.baseinfo
    return (
      <div className="member-bet-items">
        
        <div className="inner">
              <div className="item">
                <div  className="orderitem">
                <div className="left">
                <input type="number" ref="money" onChange={this.onMoneyInput.bind(this)}
                placeholder="输入金额" min={this.getMinLimit()} max={this.getMaxLimit()} />
                </div>
                <div className="gg">{name + "-"}{this.getNumberLabel()} </div>
                {this.getNumberContent()}
                <div className="tips"><span>单注{this.getMinLimit()}-{this.getMaxLimit()}元</span> <span>单期最高{this.getPeriodLimit()}元</span></div>
              </div>
              </div> 
         
        </div>
        <div className="bottomorder">
                  <List.Item
                  extra={<Button type="warning" size="small" style={{height:"40px",lineHeight:"40px"}} inline onClick={this.onSubmit.bind(this)}>确认投注</Button>}
                >
                  <span className="red">{this.state.total}</span>注
                  共<span className="red">{this.state.totalmoney}</span>元
                  </List.Item>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    betcenter: state.betcenter
  }
}

export default connect(mapStateToProps)(OrderItemGG)